<template>
  <div class="home">
    <!-- 五子棋：dom -->
    <div class="title">
      <div class="type">五子棋：<span>{{type}}</span></div>
      <div class="switch" @click="change">切换</div>
      <div class="switch" @click="reset">重置</div>
    </div>
    <!-- 视图 -->
    <router-view/>
  </div>
</template>
<script>
export default {
  components: {
  },
  data () {
    return {
      type: 'dom',
      sign: true
    }
  },
  mounted () {
    const name = window.sessionStorage.getItem('name')
    if (name) this.type = name
  },
  methods: {
    change () {
      if (this.sign) {
        this.$router.push('/canvas')
        this.sign = false
        this.type = 'canvas'
        window.sessionStorage.setItem('name', 'canvas')
      } else {
        this.$router.push('/dom')
        this.sign = true
        this.type = 'dom'
        window.sessionStorage.setItem('name', 'dom')
      }
    },
    reset () {
      this.$router.go(0)
    }
  }
}
</script>
<style lang="less" scoped>
.title{
  display: flex;
  justify-content: center;
  .type{
    color: plum;
    span{
      display: inline-block;
      width: 60px;
    }
  }
  .switch{
    margin-left: 15px;
    width: 60px;
    border: 1px solid #000;
    box-sizing: border-box;
    text-align: center;
    border-radius: 3px;
    background-color: #fff;
    cursor: pointer;
    user-select: none;
  }
}
</style>
